<!--
 * @Author: your name
 * @Date: 2021-01-26 11:07:26
 * @LastEditTime: 2021-01-28 17:19:35
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \tlwok-front-purchase-platfrom\src\pages\admin\purchase\statistics.vue
-->
<template>
  <div>
    <div class="dateRange">
      时间筛选：
      <el-radio-group v-model="dateRange" @change="changeRadio()" size="small">
        <el-radio-button label="">所有时间</el-radio-button>
        <el-radio-button label="1">本月</el-radio-button>
        <el-radio-button label="2">本年</el-radio-button>
      </el-radio-group>
      <div class="userDefined">
        <span style="margin-right: 10px">自定义:</span>
        <el-date-picker
          size="small"
          v-model="userDefinedRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="userDefinedDate()"
          value-format="timestamp"
        >
        </el-date-picker>
      </div>
      <div class="userDefined">
        <span style="margin-right: 10px">采购来源:</span>
        <el-select
          size="small"
          clearable
          placeholder="全部来源"
          v-model="queryData.purchaseSource"
          @change="changePurchaseSource"
        >
          <el-option :value="null" label="全部来源"></el-option>
          <el-option :value="1" label="线上采购"></el-option>
          <el-option :value="2" label="线下采购"></el-option>
        </el-select>
      </div>
    </div>
    <el-table
      :data="reportData.totalSupplierNum ? [{}] : []"
      border
      style="width: 100%; margin: 50px 0"
    >
      <el-table-column label="采购商总数" align="center">
        <template>{{ reportData.totalSupplierNum }}</template>
      </el-table-column>
      <el-table-column label="采购订单数" align="center">
        <template>{{ reportData.totalOrderNum }}</template>
      </el-table-column>
      <el-table-column label="采购订单总金额" align="center">
        <template>{{ reportData.totalOrderPrice | formatAmount }}</template>
      </el-table-column>
    </el-table>
    <div class="purchaser-box">
      <h3 class="title">采购订单总金额排行</h3>
      <el-table
        :data="reportData.purchaserList"
        style="width: 100%"
        max-height="250"
      >
        <el-table-column
          label="采购商用户名"
          prop="purchaserName"
          align="center"
        >
        </el-table-column>
        <el-table-column label="采购订单总数" prop="orderNums" align="center">
        </el-table-column>
        <el-table-column label="采购订单总金额(元)" align="center">
          <template slot-scope="scope">{{
            scope.row.orderPrices | formatAmount
          }}</template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { report } from '@/api/purchase/statistics';
export default {
  data () {
    return {
      dateRange: '',
      userDefinedRange: [],
      queryData: {
        purchaseSource: null, // 采购来源
        startTime: '',
        endTime: '',
      },
      reportData: {
        totalSupplierNum: null,
        totalOrderNum: null,
        totalOrderPrice: null,
        purchaserList: [],
      },
    };
  },
  mounted () {
    this.report();
  },
  methods: {
    changeRadio () {
      this.userDefinedRange = [];
      const date = new Date();
      const y = date.getFullYear();
      const m = date.getMonth();
      switch (this.dateRange) {
        case '1':

          this.queryData.startTime = new Date(y, m, 1).getTime();
          this.queryData.endTime = new Date(y, m + 1, 1).getTime() - 1000;
          break;
        case '2':
          this.queryData.startTime = new Date(y, 0, 1).getTime();
          this.queryData.endTime = new Date(y + 1, 0, 1).getTime() - 1000;
          break;

        default:
          this.queryData.startTime = '';
          this.queryData.endTime = '';
          break;
      }
      this.report();
    },
    userDefinedDate () {
      this.dateRange = null;

      this.queryData.startTime = this.userDefinedRange[0];
      this.queryData.endTime = this.userDefinedRange[1];
      this.report();
    },
    changePurchaseSource () {
      this.report();
    },
    async report () {
      const loading = this.$loading();
      try {
        const result = await report(this.queryData);
        Object.keys(this.reportData).map(key => {
          this.reportData[key] = result[key];
        });
      } catch (error) {
        console.log(error);
      }
      loading.close();
    },
  },
};
</script>

<style scoped lang="scss">
.dateRange {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.userDefined {
  margin-left: 30px;
}
.purchaser-box {
  margin: 50px 0;
}
</style>
